<!DOCTYPE html>
<html>
<head>
	<title>index01.html</title>
	<meta charset="utf-8"/>
	<script src="./bower_components/react/react.js"></script>
	<script src="./bower_components/react/react-dom.js"></script>
	<script src="./bower_components/babel/browser.js"></script>

	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		.dragNode {
			width: 200px;
			height: 200px;
			background: red;
			position: absolute;
		}

	</style>
</head>
<body>
	<div id='app'></div>

	<script type="text/babel">

		class Drag extends React.Component {
			constructor() {
				super();
				this.state = {
					needX: 10,
					needY: 0
				}

				this.disX = 0;
				this.disY = 0;
			}

			render() {
				return (
					<div 
						className="dragNode" 
						style={{left: this.state.needX, top: this.state.needY,
							background: this.props.style.background}} 
						onMouseDown={this.fnDown.bind(this)}></div>
				) 
			}

			fnDown(e) {
				this.disX = e.clientX - e.target.offsetLeft;
				this.disY = e.clientY - e.target.offsetTop;

				console.log("disX:", this.disX, "; disY:", this.disY);

				document.onmousemove = this.fnMove.bind(this);
				document.onmouseup = this.fnUp.bind(this);
			}

			fnMove(e) {
				this.setState({
					needX: e.clientX - this.disX,
					needY: e.clientY - this.disY
				})
			}

			fnUp() {
				document.onmousemove = null;
				document.onmouseup = null;
			}
		}

		ReactDOM.render(<Drag style= {{background: 'green'}} />, app);
	</script>

</body>
</html> 